import React, { Component } from 'react';
import { base, high, toast } from 'nc-lightapp-front';
import Header from 'src/hrkq/statistics/common/components/Header';
import { getCurDayEndTs, getCurDayStartTs } from 'src/hrkq/statistics/common/utils';

// css
import './index.less';

// 组织部门
import OrgDeptRefer from 'uapbd/refer/org/BusinessUnitAndDeptTreeRef';

// 补考勤类型
import AttendanceRefer from 'src/hrkq/refer/kqref/AttendanceTypeGridRef/index.js';

import OutsideRefer from 'src/hrkq/refer/kqref/OutsideTypeRef/index.js';

let { NCInput, NCSelect,NCFormControl, NCSelect: { NCOption } } = base;

export default class extends Component {
    constructor(props) {
        super(props);

        this.state = {
            headerSearch:{
                pk_orgDept:{},
                orgId:'',
                location:'',
                signType:'',
                attendanceType:'',
                userName:'',
                fill_type_id:{},
                approveStatus:'',
                outside_type:{}
            },
            headerTime:{}
        };
    }

    headerChange = (type) => {
        let data = this.state.headerSearch
        return (value) => {
            // debugger
            switch(type) {
                case 'dept':
                    let str = ''
                    let arr = []
                    value.forEach((item)=>{
                        arr.push(item.refpk)
                    })
                    str = arr.join(',')
                    data.pk_orgDept = value
                    data.orgId = str
                    break;
                case 'code':
                    data.userName = value
                    break;
                case 'location':
                    data.location= value
                    break;
                case 'source':
                    if(value==='0'||value==='2') {
                        data.signType = '1'
                        data.attendanceType = value
                    }else {
                        switch(value){
                            case '3':
                                data.signType = '6'
                                break;
                            case '4':
                                data.signType = '2'
                                break;
                            case '5':
                                data.signType = '3'
                                break;
                            case '6':
                                data.signType = '5'
                                break;
                            default:
                                data.signType = ''
                                break;
                        }
                        data.attendanceType = ''
                    }
                    break;
                case 'attend':
                    data.fill_type_id = value
                    break;
                case 'outside':
                    data.outside_type = value
                    break;
                case 'approve':
                    data.approveStatus = value
                    break;
            }
            this.setState({headerSearch:data})
        }

    }
  
    // 获取选择范围状态列表内容
    getOrderStatusList = ()=>{
        let { lang } = this.props;
        if( JSON.stringify(lang) !== '{}' ){
            let orderStatusList = [{
                key: 'all',
                label: lang['hrkq-0000049'], // 全部
            }, {
                key: '-1',
                label: lang['hrkq-0000097'], // '自由态'
            }, {
                key: '3',
                label: lang['hrkq-0000054'], // 提交
            }, {
                key: '2',
                label: lang['hrkq-0000055'], // 审批进行中
            }, {
                key: '1',
                label: lang['hrkq-0000056'], // 审批通过
            }, {
                key: '0',
                label: lang['hrkq-0000057'], // 审批未通过
            }
            ]
            return orderStatusList;
        }
    }
    // 获取选择范围状态列表内容
    getSourceStatus = ()=>{
        let { lang } = this.props;
        if( JSON.stringify(lang) !== '{}' ){
            let sourceStatusList = [{
                key: '0',
                    label: lang['hrkq-0000069'], // 内勤
                }, {
                    key: '2',
                    label: lang['hrkq-0000068'], // 外勤
                }, {
                    key: '3',
                    label: lang['hrkq-0000070'], // 补考勤
                }, {
                    key: '4',
                    label: lang['hrkq-0000071'], // 导入
                }, {
                    key: '5',
                    label: lang['hrkq-0000072'], // 考勤机
                }, {
                    key: '6',
                    label: lang['hrkq-0000100'], // 新增
                }
            ]
            return sourceStatusList;
        }
    }


    render() {
        const {
            props,
            props: {
                lang,
                tabActive
            },
            state,
            state: {
                headerSearch
            }
        } = this
        let orderStatusList = this.getOrderStatusList()||[]
        let sourceStatusList = this.getSourceStatus()||[]
        return (
            <Header
                ref={node => this.headerTime = node}
                { ...props }
                expand = {
                    <div style={{overflow:'hidden'}}>
                        <div style={{width:'150px',marginLeft:'10px',float:'left'}}>
                            <OrgDeptRefer
                                refName={`${lang['hrkq-0000011'] || ''}/${lang['hrkq-0000012'] || ''}` }
                                placeholder={`${lang['hrkq-0000011'] || ''}/${lang['hrkq-0000012'] || ''}` }
                                value={headerSearch.pk_orgDept}
                                isMultiSelectedEnabled={true}
                                onChange = {
                                    this.headerChange('dept')
                                }
                                queryCondition={{TreeRefActionExt: 'nccloud.web.hrkq.attendance.sqlbuilder.UnitAndDeptTreeOfPowerSqlBuilder'}}
                                rootNode={{
                                    refname: `${lang['hrkq-0000011'] || ''}/${lang['hrkq-0000012'] || ''}` , refpk: 'root'
                                }}
                            />
                        </div>
                        {
                            tabActive.id === 'details'? 
                            <div style={{width:'150px',marginLeft:'10px',float:'left'}}>
                                <NCFormControl onChange = {
                                    this.headerChange('location')
                                } value = {headerSearch.location} placeholder={lang['hrkq-0000023']}/>
   
                           </div>:''
                        }
                        {
                            tabActive.id === 'details'? 
                            <div style={{width:'150px',marginLeft:'10px',float:'left'}}>
                               <NCSelect
                                        // multiple={true}
                                        showClear={false}
                                        placeholder={lang['hrkq-0000024']}
                                        onChange={this.headerChange('source')}
                                        // value={agreementTypeId}
                                    >
                                         <NCOption></NCOption>
                                        {sourceStatusList.map((item) => {
                                            return (
                                                <NCOption
                                                    key={item.key}
                                                >
                                                    {item.label}
                                                </NCOption>
                                            );
                                        })}
                                    </NCSelect>
                             </div>:''
                        }
                       {
                        tabActive.id === 'details'||tabActive.id === 'attendance'||tabActive.id === 'outside'?
                        <div style={{width:'150px',marginLeft:'10px',float:'left'}}>
                            <NCFormControl onChange = {this.headerChange('code')} value = {headerSearch.userName} placeholder={`${lang['hrkq-0000014'] || ''}/${lang['hrkq-0000015'] || ''}`}/>
                         </div>:''
                       }
                        
                        {
                            tabActive.id === 'attendance'?
                            <div style={{width:'150px',marginLeft:'10px',float:'left'}}>
                                <AttendanceRefer
                                    refName={lang['hrkq-0000140']} //补考勤类型
                                    placeholder={lang['hrkq-0000140']} 
                                    value={headerSearch.fill_type_id}
                                    onChange = {
                                        this.headerChange('attend')
                                    }
                                    rootNode={{
                                        refname: lang['hrkq-0000140'], refpk: 'root'
                                    }}
                                />
                            </div>:''
                        }
                         
                        {
                            tabActive.id === 'outside'?
                            <div style={{width:'150px',marginLeft:'10px',float:'left'}}>
                                <OutsideRefer
                                    refName={lang['hrkq-0000141']} //外勤类型
                                    placeholder={lang['hrkq-0000141']}
                                    value={headerSearch.outside_type}
                                    onChange = {
                                        this.headerChange('outside')
                                    }
                                    rootNode={{
                                        refname: lang['hrkq-0000141'], refpk: 'root'
                                    }}
                                />
                            </div>:''
                        }
                         
                        {
                            tabActive.id === 'attendance'||tabActive.id === 'outside'?
                            <div style={{width:'150px',marginLeft:'10px',float:'left'}}>
                                <span className="top-applyStatus">
                                    <NCSelect
                                        // multiple={true}
                                        showClear={false}
                                        style={{
                                            // width: '180px'
                                        }}
                                        placeholder={lang['hrkq-0000049']}
                                        onChange={this.headerChange('approve')}
                                        // value={agreementTypeId}
                                    >
                                        {orderStatusList.map((item) => {
                                            return (
                                                <NCOption
                                                    key={item.key}
                                                >
                                                    {item.label}
                                                </NCOption>
                                            );
                                        })}
                                    </NCSelect>
                                </span>
                            </div>:''
                        }
                        
                    </div>
                }
               >
            </Header>
        );
    }
}